<script>
    var baseUrl = "<?php echo $baseUrl; ?>?t=1";
</script>

<div class="layui-row search-row" id="search-box">
    <?php if(!empty($carModelsType)){ ?>
    <div class="item">
        <div class="row" style="width: 330px">
            <div class="box">
                <span class="title">车辆类型：</span>
                <div  data-key="type_id" data-type="select" class="txt search-key" >
                    <select name="all" lay-filter="type_id" class="select">
                        <option value="">请选择</option>
                        <?php foreach ($carModelsType as $key => $value) { ?>
                        <option value="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
    <?php if(!empty($carSeatType)){ ?>
    <div class="item">
        <div class="row" style="width: 400px">
            <div class="box">
                <span class="title">座位类型：</span>
                <div data-key="seat" data-type="list" class="search-key list" >
                    <ul>
                        <?php foreach ($carSeatType as $key => $value) { ?>
                        <li><span data-value="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></span></li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
    <div class="item">
        <div class="row" style="width: 360px;">
            <div class="box">
                <span class="title">关键字查询：</span>
                <div data-key="key" data-type="txt" class="search-key txt">
                    <input type="text" value="" placeholder="车型名称"/>
                </div>
            </div>
        </div>
        <div class="row" style="width: 460px;">
            <div class="btn">
                <button class="layui-btn layui-btn-sm btn-query">查询</button>

                <?php if(Cm::$app->limitPost('/platform/car/model','save')){ ?>
                    <a href="javascript:void(0)" class="layui-btn layui-btn-primary layui-btn-sm" onclick="app.edit.add()">+ 新增车型</a>
                <?php } ?>
            </div>
        </div>
    </div>
</div>
<table data-url="<?php echo $baseUrl; ?>?action=list"
       data-search="#search-box"
       data-page=""
       data-height="full-310"
       id="data-list"
       lay-filter='data-list' style="display: none;">
    <thead>
    <tr>
        <th width="110" field="serial_number">编码</th>
        <th width="110" field="name">车型名称</th>
        <th width="130" align="center" field="typestr">车辆类型</th>
        <th width="110" align="center" field="seatstr">座位类型</th>
        <th width="110" field="c_seat">核定座位</th>
        <th width="110" field="p_seat">乘客座位</th>
        <th  minWidth="160" toolbar="#tpl-cmd">操作</th>
    </tr>
    </thead>
</table>

<script type="text/html" id="tpl-cmd">
    <?php if(Cm::$app->limitPost('/platform/car/model','info')){ ?>
        <button onclick="app.edit.update(this)" class="layui-btn layui-btn-xs">编辑</button>
    <?php } ?>
    <?php if(Cm::$app->limitPost('/platform/car/model','del')){ ?>
        <button onclick="app.del({{d.id}})" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
    <?php } ?>    
    <span style="display: none;">{{JSON.stringify(d)}}</span>
</script>

<script type="text/html" id="tpl-edit">
    <div class="layui-card" style="box-shadow: none;">
        <div class="layui-card-header">{{id>0?'编辑车型':'新增车型'}}</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">车型名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="{{name}}" lay-verify="required"  autocomplete="off" placeholder="请输入车型名称" class="layui-input">
                    </div>
                </div>   

                <div class="layui-form-item">
                    <label class="layui-form-label">车辆类型</label>
                    <div class="layui-input-block">
                        <select lay-filter="car_type" lay-search id="car_type">
                            <option value="">请选择</option>
                            <?php foreach ($carModelsType as $key => $value) { ?>
                                <option value="<?php echo $value['id'] ?>"><?php echo $value['name']; ?></option>
                            <?php } ?>
                        </select>  
                    </div>
                </div>      

                <div class="layui-form-item">
                    <label class="layui-form-label">座位类型</label>
                    <div class="layui-input-block">
                        <select lay-filter="seat_type" lay-search id="seat_type">
                            <option value="">请选择</option>
                            <?php foreach ($carSeatType as $key => $value) { ?>
                                <option value="<?php echo $value['id'] ?>"><?php echo $value['name']; ?></option>
                            <?php } ?>
                        </select>  
                    </div>
                </div>    

                <div class="layui-form-item">
                    <label class="layui-form-label">编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="serial_number" value="{{serial_number}}" lay-verify="required" autocomplete="off" placeholder="请输入车型编码" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">核定座位</label>
                    <div class="layui-input-block">
                        <input type="text" name="c_seat" value="{{c_seat}}" lay-verify="required|intnumber" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">乘客座位</label>
                    <div class="layui-input-block">
                        <input type="text" name="p_seat" value="{{p_seat}}" lay-verify="required|intnumber" autocomplete="off" class="layui-input">
                    </div>
                </div>  

                <?php if(Cm::$app->limitPost('/platform/car/model','save')){ ?>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
                    </div>
                </div>
                <?php } ?>
            </form>
        </div>
    </div>
</script>

<script>
    var app = {
        init: function () {
            $('#data-list').table();
            this.form.init();
        },
        form: {
            obj: null,
            init: function () {
                var _this = this;
                layui.use('form', function () {
                    var form = layui.form;
                    _this.obj = form;
                    form.verify({
                        intnumber: [
                            /^([1-9]|[1-9]\d+)$/
                            , '请填写大于0的整数！'
                        ]
                    });
                });
            },
            on: function () {
                var _this = this;
                 
                this.obj.on('select(car_type)', function (data) {
                    app.edit.data.type_id = data.value;
                });
                this.obj.on('select(seat_type)', function (data) {
                    app.edit.data.seat_type_id = data.value;
                });

                this.obj.on('submit(*)', function (data) {
                    if(app.edit.data.type_id==0){
                        layer.msg("请选择车辆类型!", {icon: 5});
                        return false;
                    }
                    if(app.edit.data.seat_type_id==0){
                        layer.msg("请选择座位类型!", {icon: 5});
                        return false;
                    }
                    if(data.field.c_seat<data.field.p_seat){
                        layer.msg("乘客座位数只能小于等于核定座位数!", {icon: 5});
                        return false;
                    }
                    app.edit.data.name = data.field.name;
                    app.edit.data.serial_number = data.field.serial_number;
                    app.edit.data.c_seat = data.field.c_seat;
                    app.edit.data.p_seat = data.field.p_seat;
                    app.save();
                    return false;
                });
            },
            render: function (select) {
                this.obj.render(select);
                this.on();
            }
        },
        edit:{
            data:null,
            load:function(){
                layer.open({
                    title:false,
                    area:['430px','550px'],
                    type:1,
                    content:template('tpl-edit', this.data)
                });
                if(app.edit.data.type_id!=0){
                    $("#car_type").val(app.edit.data.type_id);
                }
                if(app.edit.data.seat_type_id!=0){
                    $("#seat_typ").val(app.edit.data.seat_type_id);
                }
                app.form.render();
            },
            add:function(){
                this.data={
                    id:0,
                    name:'',
                    serial_number:'',
                    type_id:0,
                    seat_type_id:0,
                    c_seat:0,
                    p_seat:0
                };
                this.load();
            },
            update:function(e){
                var str=$(e).parent().find('span').html();
                var json=eval('('+str+')');
                this.data={
                    id:json.id,
                    name:json.name,
                    serial_number:json.serial_number,
                    type_id:json.type_id,
                    seat_type_id:json.seat_type_id,
                    c_seat:json.c_seat,
                    p_seat:json.p_seat
                };
                this.load();
            }    
        },
        save:function () {
            $.post(baseUrl+'&action=save',this.edit.data,function (d) {
                if(d.flag)
                {
                    layer.closeAll();
                    layer.msg(d.msg);
                    $('#data-list').table();
                }else{
                    layer.msg(d.msg);
                }
            },'json')
        },
        del:function (id) {
            layer.msg("确定删除该车型吗？", {
                time: false, //20s后自动关闭
                btn: ['确定', '取消'],
                yes:function () {
                    $.post(baseUrl+'&action=del',{id:id},function (d) {
                        layer.closeAll();
                        if(d.flag)
                        {
                            layer.msg('删除成功');
                            $('#data-list').table();
                        }else{
                            layer.msg(d.msg);
                        }
                    },'json')
                }
            });
        }
    };

    app.init();
</script>